
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>所有问卷</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="规则编号：">
        <el-input size="small" v-model="formInline.name" placeholder="请输入规则编号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search"
          style="background-color: rgb(0, 84, 254);">搜索</el-button>
        <el-button size="small" icon="el-icon-plus" @click="reset()" style="background-color: white;">重置</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
      style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column sortable prop="Id" label="规则编号" width="200" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="Name" label="标题" width="200" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="FillNumer" label="填写人数" width="200" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="State" label="状态" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="CreatedTime" label="更新时间" width="140" show-overflow-tooltip>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            style="background-color: white;color: rgba(0, 84, 254);border: none;font-weight: bold;">编辑</el-button>
          <el-button size="mini" @click="deleteUser(scope.$index, scope.row)"
            style="background-color: white;color: rgba(0, 84, 254);border: none;font-weight: bold;">删除</el-button>
            <el-button size="mini" @click="checkResult(scope.$index)"
            style="background-color: white;color: rgba(0, 84, 254);border: none;font-weight: bold;">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页组件 -->
     <el-pagination
  background
  layout="prev, pager, next"
  :total="1000" @current-change="pagefn">
</el-pagination>
    <!-- 编辑界面 -->
    <el-dialog title="修改问卷" :visible.sync="editFormVisible" width="80%" @click="closeDialog('editForm')">
      <div class="create-survey">

        <el-form :model="form" label-width="120px" ref="form">
          <el-form-item label="问卷标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="问卷题目">
            <template v-for="(question, index) in form.Questions">
              <el-card class="question-card" :key="index">
                <header>
                  <span>第 {{ index + 1 }} 题</span>
                  <el-button type="danger" size="mini" @click="removeQuestion(index)">删除</el-button>
                </header>
                <el-form-item label="题型">
                  <el-radio-group v-model="question.Type">
                    <el-radio :label="'SingleChoice'">单选题</el-radio>
                    <!-- <el-radio :label="'multiple-choice'">多选题</el-radio> -->
                    <el-radio :label="'OpenEnded'">问答题</el-radio>
                    <!-- <el-radio :label="'ValidCheck'">有效性检验</el-radio> -->
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="内容">
                  <el-input v-model="question.Content"></el-input>
                </el-form-item>
                <template v-if="question.Type === 'SingleChoice' || question.Type === 'ValidCheck'">
                  <el-form-item label="选项">
                    <template v-for="(option, optionIndex) in question.options">
                      <el-input v-model="option.value" :placeholder="'选项 ' + (optionIndex + 1)"
                        class="option-input"></el-input>
                      <el-button type="danger" size="mini" @click="removeOption(question, optionIndex)">删除</el-button>
                    </template>
                    <el-button size="small" @click="addOption(question)">添加选项</el-button>
                  </el-form-item>
                </template>
              </el-card>
            </template>
            <el-button class="add-question-btn" type="primary" size="small" @click="addQuestion">添加问题</el-button>
          </el-form-item>
        </el-form>
        <div class="buttons">
          <el-button type="primary" @click="submitForm('form')">提交</el-button>

        </div>
      </div>
    </el-dialog>

<!--     
    <el-dialog title="查看结果" :visible.sync="checkFormVisible" width="80%" @click="closeCheckDialog('EditForm')">
        <div class="check-survey">
  
          <el-form :model="answers" label-width="120px" ref="form">
            <template v-for="(question, index) in survey.Questions">
              
              <el-card class="question-card" :key="index">
                <header>
                  <span>第 {{ index + 1 }} 题</span>
                 
                </header>
  
                <el-form-item :label="question.Content">
                  <template v-if="question.QuestionType === 'SingleChoice'">
                    
                    <el-radio-group v-model="answers[index]">
                      <template v-for="(option, optionIndex) in question.Options">
  
                        <el-radio :key="optionIndex" :label="option.Value">{{ option.Value }}</el-radio>
                      </template>
                    </el-radio-group>
                  </template>
  
                  <template v-if="question.QuestionType === 'OpenEnded'">
                    <el-input v-model="answers[index]" type="textarea"></el-input>
                  </template>
                </el-form-item>
              </el-card>
            </template>
          </el-form>
          
        </div>
      </el-dialog> -->


    <el-dialog title="查看结果" :visible.sync="checkFormVisible" width="80%" @click="closeDialog('checkForm')">
      <div class="check-survey">

        <el-form :model="form" label-width="120px" ref="form">
          <el-form-item label="问卷标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="问卷题目">
            <template v-for="(question, index) in form.Questions">
              <el-card class="question-card" :key="index">
                <header>
                  <span>第 {{ index + 1 }} 题</span>
                  
                </header>
                <el-form-item label="题型">
                  <el-radio-group v-model="question.Type">
                    <el-radio :label="'SingleChoice'">单选题</el-radio>
                    
                    <el-radio :label="'OpenEnded'">问答题</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="内容">
                  <el-input v-model="question.Content"></el-input>
                </el-form-item>
                <el-form-item label="2人选择选项1">

                </el-form-item>
                <el-form-item label="0人选择其他选项">

                </el-form-item>
                <template v-if="question.Type === 'SingleChoice' || question.Type === 'multiple-choice'">
                  <el-form-item label="选项">
                    <template v-for="(option, optionIndex) in question.options">
                      <el-input v-model="option.value" :placeholder="'选项 ' + (optionIndex + 1)"
                        class="option-input"></el-input>
                      <el-button type="danger" size="mini" @click="removeOption(question, optionIndex)">删除</el-button>
                    </template>
                   
                  </el-form-item>
                </template>
              </el-card>
            </template>
            
          </el-form-item>
        </el-form>
        <div class="buttons">

        </div>
      </div>
    </el-dialog>  
 

  </div>
   
</template>






<script>
import { ConfigList, ConfigSave, ConfigDelete } from '../../api/payMG'
import Axios from 'axios'

export default {
  data() {
    return {
      DeteteId: '',
      form: {
        title:'',
        Questions:[

        ]
      },
      survey: {
          title: '测试问卷',
          tempindex: '',
          Questions: [
            [
  
            ]
          ]
        },
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      checkFormVisible: false,
      title: '添加',
      
      editForm: {
        id: '',
        name: '',
        payType: 1,
        partner: '',
        subMchId: '',
        appid: '',
        notifyUrl: '',
        signType: '',
        partnerKey: '',
        sellerUserId: '',
        certPath: '',
        certPassword: '',
        rsaKey: '',
        token: localStorage.getItem('logintoken')
      },


      formInline: {
        page: 1,
        limit: 10,
        name: '',
        payType: 0,
        partner: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
 
  
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    addQuestion() {
      this.form.Questions.push({
        type: 'SingleChoice',
        content: '',
        options: [{ value: '' }]
      });
    },
    removeQuestion(index) {
      this.form.Questions.splice(index, 1);
    },
    addOption(question) {
      question.options.push({ value: '' });
    },
    removeOption(question, index) {
      question.options.splice(index, 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form);
        } else {
          console.log('表单无效');
          return false;
        }
      });
    },
    // async submitForm(formName) {
    //   this.$refs[formName].validate(async valid => {
    //     if (valid) {
    //       this.form.userId = localStorage.getItem('userId')
    //       console.log(this.form);
    //       const token = localStorage.getItem("token")
    //       let res1 = await Axios.post(this.$baseURL+ '/Survey/NewSurvey', this.form, {
    //         headers: {
    //           'Content-Type': 'application/json',
    //            Authorization: `Bearer ${token}`
    //         },
    //       })
          
    //       this.$router.push('/Surveywrite/index')
    //       this.$message({
    //         type: 'success',
    //         message: '提交成功'
    //       })


    //       console.log(res1)
    //     } else {
    //       console.log('表单无效');
    //       return false;
    //     }
    //   });


      
    // },
    resetForm(parameter) {
      this.$refs[formName].resetFields();
    },
   async reset(){
    const token = localStorage.getItem("token")
      let res2 = await Axios({
            method: 'get',
        
            url: this.$baseURL+'/Survey?pageIndex=1&pageSize=10',
            headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`
            },
          })

          this.listData = res2.data
    },
    async getOne(parameter){
      const token = localStorage.getItem("token")
      let res1 = await Axios({
        method: 'get',
        url:  this.$baseURL+'/Survey/One?Id='+parameter.name,
        headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`
            },
      })
      this.listData = []
      this.listData[0] = res1.data
      // console.log(res1.data)
    },
    // 获取列表
    async getdata() {
      this.loading = true
      const token = localStorage.getItem("token")
      let res1 = await Axios({
        method: 'get',
        url:  this.$baseURL+'/Survey?pageIndex=1&pageSize=10',
        headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`
            },
      })


      this.loading = false
      this.listData = res1.data

    },
    // 分页插件事件
    callFather(parm) {
     console.log( parm.currentPage)
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getOne(this.formInline)
    },
    //显示编辑界面
    handleEdit: async function (index, row) {

      localStorage.getItem("editindex", index)
      this.editFormVisible = true


      this.writeId = this.listData[index].Id
      localStorage.setItem('write', this.writeId)
      console.log(this.listData[index].Id)
      const token = localStorage.getItem("token")
      let res1 = await Axios({
        method: 'get',
        url: this.$baseURL+'/Survey/Detail?Id='+this.writeId,
        headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`
            },
      })
      
      this.form.title = res1.data.Name
      this.form.Questions = [...res1.data.Questions]
      this.form.UserId = localStorage.getItem('userId')
      console.log(res1)

      this.editFormVisible = true

    },
    checkResult: async function (index, row) {

      localStorage.getItem("editindex", index)
      this.checkFormVisible = true


      this.writeId = this.listData[index].Id
      localStorage.setItem('write', this.writeId)
      console.log(this.listData[index].Id)
      const token = localStorage.getItem("token")
      let res1 = await Axios({
        method: 'get',
        url: this.$baseURL+'/Survey/Detail?Id='+this.writeId,
        headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`
            },
      })

      this.form.title = res1.data.Name
      this.form.Questions = [...res1.data.Questions]
      this.form.UserId = localStorage.getItem('userId')
      console.log(res1)

      this.checkFormVisible = true

      },
    async pagefn(val){
      const token = localStorage.getItem("token")
      let res1 = await Axios({
        method: 'get',
        url: this.$baseURL+'/Survey?pageIndex='+val+'&pageSize=10',
        headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`
            },
      })
      this.listData = res1.data
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(async valid => {
        if (valid) {
          const token = localStorage.getItem("token")
          let res1 = await Axios.post(this.$baseURL+'/Survey/EditSurvey?Id='+localStorage.getItem('write'), this.form, {
            headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`
            },
          })
          this.editFormVisible = false
          this.$message({
            type: 'success',
            message: '编辑成功'
          })

          window.location.reload()
        } else {
          return false
        }
      })
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
    // 删除
    deleteUser(index, row) {
      console.log(index)
      console.log(this.listData[index].Id)
      this.DeteteId = this.listData[index].Id




      // 删除
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const token = localStorage.getItem("token")
          let res1 = await Axios({
            method: 'delete',
            url: this.$baseURL+'/Survey?Id='+this.DeteteId,
            headers: {
              'Content-Type': 'application/json',
               Authorization: `Bearer ${token}`
            },
          })
          console.log(res1)

          let res2 = await Axios({
            method: 'get',
            url: this.$baseURL+'/Survey?pageIndex=1&pageSize=10',
            headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`
            },
          })

          this.$message({
            type: 'success',
            message: '删除成功'
          })

          this.listData = res2.data

        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog(formName) {
      this.editFormVisible = false
      this.$refs[formName].resetFields()
    },
    closeCheckDialog(formName) {
      this.checkFormVisible = false

      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>

 
 